<script>
  import {
    defineComponent, onMounted,
  } from '@vue/composition-api';
  import { FormModel } from 'ant-design-vue';
  import FormItem from './FormItem';

  const KtForm = defineComponent({
    name: 'KtForm',
    components: {
      [FormModel.name]: FormModel,
      FormItem,
    },
    props: {
      basicProps: {
        type: Object,
        required: true,
      },
    },
    emits: ['init-form'],
    setup(props, { emit, refs }) {

      onMounted(() => {
        emit('init-form', refs.basicFormRef);
      });

    },
  });

  export default KtForm;
</script>

<template>
  <div>
    <a-form-model
      ref="basicFormRef"
      :model="basicProps.model"
      v-bind="$attrs"
      :label-col="basicProps.labelCol"
      :wrapper-col="basicProps.wrapperCol"
      class="basic-form"
    >
      <form-item
        v-for="(schema, index) of basicProps.schemas"
        :key="index"
        :form="basicProps.model"
        :schema="schema"
        :disabled="basicProps.disabled"
      />
      <slot />
    </a-form-model>
  </div>
</template>

<style lang='less'>
.basic-form {
  display: inline-block;
  position: relative;

  .ant-select {
    min-width: 100px;
  }

  .ant-input-number {
    width: 100% !important;
  }
}
</style>
